<template>
  <div class="myIntrgral">
    <div class="integralHeader">
      <div class="integralImg"><img src="/static/images/user/intregralBg.png" alt=""></div>
      <div class="integralTxt">
        <h3>我的积分</h3>
        <p>{{allIntegral}}</p>
      </div>
    </div>
    <ul class="integralTab">
      <li :class="{'active':currentTab == 0}" @click="handelCurrentTab(0)">互助美豆</li>
      <li :class="{'active':currentTab == 7}" @click="handelCurrentTab(7)">美豆</li>
      <li :class="{'active':currentTab == 8}" @click="handelCurrentTab(8)">消费美豆</li>
      <li :class="{'active':currentTab == 3}" @click="handelCurrentTab(3)">分润美豆</li>
      <li :class="{'active':currentTab == -1}" @click="handerOther(-1)">其它</li>
    </ul>
    <div v-if="helpUserInfo.length>0">
      <integral-item 
      v-for="(item,index) in helpUserInfo" 
      :key="index"
      :helpName="item.userIntegralFromType"
      :helpTime="item.createdAt"
      :helpIntegral="item.integral"
      :tabTyp="currentTab"
      >
      </integral-item>
    </div>
    <div v-if="helpUserInfo.length == 0" class="lackMoney">
      <div class="lackMoneyDiv">
        <div class="integralImg"><img src="/static/images/user/lackmoney.png" alt=""></div>
        <p>暂无相关美豆~</p>
      </div>
    </div>
    <div v-if="isBottom" class="bottomDiv"><img src="/static/images/goods/loading2.png">别拉了，到底啦~</div>
  </div>
</template>

<script>
  import integralItem from './integral-item.vue'
  export default {
    components:{
      integralItem
    },
    data(){
      return{
        allIntegral: Number,//所有的积分
        currentTab: 0,
        page: 1,
        totalPage: Number,//总页数
        isBottom: false,//判断是否到底了
        helpUserInfo: [],
      }
    },
    onReachBottom () { //上拉加载
      if(this.totalPage > this.page){
        this.page++
        this.sortIntegral()
      }else{
        this.isBottom = true
      }
    }, 
    //下拉刷新
    onPullDownRefresh(){
      wx.stopPullDownRefresh();//设置下拉弹回去
      this.isBottom = false
    },
    onShow(){
      this.page = 1
      this.helpUserInfo = []  //重置功能
      this.getAllIntegral()
      this.sortIntegral()
    },
    methods:{
      getAllIntegral(){
        this.$http.get("integral/my/integral").then((res=>{
          this.allIntegral = res.data.data.integral;  
        }))
      },
      sortIntegral(){
        this.$http.get(`integral/pageIntegral/${this.currentTab}/${this.page}`).then((res)=>{
          this.helpUserInfo = this.helpUserInfo.concat(res.data.data.userIntegralDetailResponseList) 
          this.totalPage = res.data.data.totalPage
        })
      },
      handelCurrentTab (tab){ //tab切换
        this.currentTab = tab;
        this.page = 1;
        this.isBottom = false;
        this.helpUserInfo = [];
        this.sortIntegral()
      },
      handerOther(tab){//点击其它
        this.currentTab = tab;
        this.page = 1;
        this.isBottom = false;
        this.helpUserInfo = [];
        this.$http.get(`integral/other/${this.page}`).then((res)=>{
          this.helpUserInfo = this.helpUserInfo.concat(res.data.data.userIntegralDetailResponseList) 
          this.totalPage = res.data.data.totalPage
        })
      }
    }
}
</script>

<style scoped>
.myIntrgral{
  background: #efeff4;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.integralHeader{
  width: 100%;
  height: 220rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.integralHeader .integralImg{
  width: 100%;
  height: 220rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.integralHeader .integralImg img{
  display: block;
  width: 100%;
  height: 100%;
}
.integralHeader .integralTxt{
  position: relative;
  z-index: 2;
  color: #e38a8a;
  text-align: center;
  margin-top: 15rpx;
}
.integralHeader .integralTxt h3{
  font-size: 34rpx;
}
.integralHeader .integralTxt p{
  font-size: 60rpx;
}
.integralTab{
  display: flex;
  background: #fff;
  margin-bottom: 20rpx;
}
.integralTab li{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #c5c3c4;
  height: 90rpx;
  border-bottom: none;
}
.integralTab li.active{
  color: #000;
  border-bottom: 5rpx solid #e38a8a;
}
.lackMoney{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 310rpx;
}
.lackMoney .lackMoneyDiv .integralImg{
  width: 260rpx;
  height: 170rpx;
}
.lackMoney .lackMoneyDiv .integralImg img{
  width: 100%;
  height: 100%;
  display: block;
}
.lackMoney .lackMoneyDiv p{
  font-size: 28rpx;
  color: #B4B4B4;
  margin-top: 20rpx;
  text-align: center;
}
.bottomDiv{
  background: #fff;
  width: 100%;
  font-size: 26rpx;
  color: #a09f9f;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  padding: 10rpx 0;
  position: relative;
}
.bottomDiv>img{
  width: 34rpx;
  height: 34rpx;
  margin-right: 10rpx;
}
</style>
